import { defineComponent, provide, toRef, watchEffect } from 'vue';

// import { TMenu,TList TItem } from 't';
import FilterLayout from './filter-layout.jsx';
import { useOperationProps } from './use-col-filter.js';
import TInput from 't/basic/input';

export default defineComponent({
  name: 'TDataGridColFilterInput',
  props: {
    ...useOperationProps,
  },
  emits: ['update:operation', 'change'],

  setup(props, { attrs, emit, expose, slots }) {
    const filterOperations = [
      'contains',
      'notcontains',
      'startswith',
      'endswith',
      '=',
      '<>',
    ];

    const operation = toRef(props.operation);

    provide('operation', operation);

    watchEffect(() => {
      emit('update:operation', operation.value);
      emit('change');
    });

    return () => {
      return (
        <FilterLayout filterOperations={filterOperations}>
          <TInput
            borderless
            outlined={false}
            v-model={operation.value.filterValue}
            dense={true}
            filled={false}
            hideLabel={true}
          ></TInput>
        </FilterLayout>
      );
    };
  },
});
